<!DOCTYPE html>
<html lang="en">
<head><title>Sample Markup</title></head>
<body>
<div id="MySelectlist" class="btn-group selectlist" data-resize="auto">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="selected-label">&nbsp;</span>
		<span class="caret"></span>
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li data-value="1"><a href="#">One</a></li>
		<li data-value="2" data-selected="true"><a href="#">Two</a></li>
		<li data-value="3"><a href="#">Three</a></li>
		<li data-value="4" data-foo="bar" data-fizz="buzz"><a href="#">Buzz</a></li>
		<li data-value="Item Five"><a href="#">Item Five</a></li>
		<li class="disabled"><a href="#">Disabled item</a>
		</li>
	</ul>
	<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

<div id="selectlistEmpty" class="btn-group selectlist" data-resize="auto">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="selected-label">&nbsp;</span>
		<span class="caret"></span>
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu">
	</ul>
	<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

<div id="selectlistSingleItem" class="btn-group selectlist" data-resize="auto">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="selected-label">&nbsp;</span>
		<span class="caret"></span>
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li data-value="1"><a href="#">One</a></li>
	</ul>
	<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

<div id="MySelectlist2" class="btn-group selectlist" data-resize="auto">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="selected-label">&nbsp;</span>
		<span class="caret"></span>
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li data-value="1"><a href="#">One</a></li>
		<li data-value="2" data-selected="true"><a href="#">Two</a></li>
		<li data-value="3"><a href="#">Three</a></li>
		<li data-value="4" data-foo="bar" data-fizz="buzz"><a href="#">Buzz</a></li>
		<li data-value="Item Five"><a href="#">Item Five</a></li>
	</ul>
	<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

<div id="MySelectlist3" class="btn-group selectlist" data-resize="auto">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="selected-label">&nbsp;</span>
		<span class="caret"></span>
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li data-value="1"><a href="#">One</a></li>
		<li data-value="2" data-selected="true"><a href="#">Two</a></li>
		<li data-value="3"><a href="#">Three</a></li>
		<li data-value="4" data-foo="bar" data-fizz="buzz"><a href="#">Buzz</a></li>
		<li data-value="Item Five"><a href="#">Item Five</a></li>
	</ul>
	<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

<div id="MySelectlist4" class="btn-group selectlist" data-resize="auto">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="selected-label">&nbsp;</span>
		<span class="caret"></span>
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li data-value="1"><a href="#">One</a></li>
		<li data-value="2" data-selected="true"><a href="#">Two</a></li>
		<li data-value="3"><a href="#">Three</a></li>
		<li data-value="4" data-foo="bar" data-fizz="buzz"><a href="#">Buzz</a></li>
		<li data-value="Item Five"><a href="#">Item Five</a></li>
	</ul>
	<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

<div id="MySelectlist5" class="btn-group selectlist" data-resize="auto">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="selected-label">&nbsp;</span>
		<span class="caret"></span>
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li data-value="1"><a href="#">One</a></li>
		<li data-value="2" data-selected="true"><a href="#">Two</a></li>
		<li data-value="3"><a href="#">Three</a></li>
		<li data-value="4" data-foo="bar" data-fizz="buzz"><a href="#">Buzz</a></li>
		<li data-value="Item Five"><a href="#">Item Five</a></li>
	</ul>
	<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

<div id="MySelectlist6" class="btn-group selectlist" data-resize="auto">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="selected-label">&nbsp;</span>
		<span class="caret"></span>
		<span class="sr-only">Toggle Dropdown</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li data-value="1"><a href="#">One</a></li>
		<li data-value="2" data-selected="true"><a href="#">Two</a></li>
		<li data-value="3"><a href="#">Three</a></li>
		<li data-value="4" data-foo="bar" data-fizz="buzz"><a href="#">Buzz</a></li>
		<li data-value="Item Five"><a href="#">Item Five</a></li>
	</ul>
	<input class="hidden hidden-field" name="MySelectlist" readonly="readonly" aria-hidden="true" type="text"/>
</div>

<div class="btn-group selectlist" id="MySelectlist7">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="selected-label">All</span>
		<span class="caret"></span>
		<span class="sr-only">Toggle Filters</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li data-value="all" data-property="all" data-selected="true"><a href="#">All</a></li>
		<li class="divider"></li>
		<li data-value="Outbound" data-property="messageType"><a href="#">Outbound</a></li>
		<li data-value="Text Response" data-property="messageType"><a href="#">Text Response</a></li>
		<li data-value="Vote Survey" data-property="messageType"><a href="#">Vote Survey</a></li>
		<li data-value="Mobile Opt-In" data-property="messageType"><a href="#">Mobile Opt-In</a></li>
		<li data-value="Info Capture" data-property="messageType"><a href="#">Info Capture</a></li>
		<li data-value="Outbound Media" data-property="messageType"><a href="#">Outbound Media</a></li>
		<li data-value="Media Response" data-property="messageType"><a href="#">Media Response</a></li>
		<li data-value="Media Share" data-property="messageType"><a href="#">Media Share</a></li>
		<li data-value="Send Email" data-property="messageType"><a href="#">Send Email</a></li>
	</ul>
	<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text" />
</div>

<div class="btn-group selectlist" data-resize="auto" data-initialize="selectlist" id="MySelectlist8">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="selected-label">All</span>
		<span class="caret"></span>
		<span class="sr-only">Toggle Filters</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li data-value="all" data-property="all" data-selected="true"><a href="#">All</a></li>
		<li class="divider"></li>
		<li data-value="Outbound" data-property="messageType"><a href="#">Outbound</a></li>
		<li data-value="Text Response" data-property="messageType"><a href="#">Text Response</a></li>
		<li data-value="Vote Survey" data-property="messageType"><a href="#">Vote Survey</a></li>
		<li data-value="Mobile Opt-In" data-property="messageType"><a href="#">Mobile Opt-In</a></li>
		<li data-value="Info Capture" data-property="messageType"><a href="#">Info Capture</a></li>
		<li data-value="Outbound Media" data-property="messageType"><a href="#">Outbound Media</a></li>
		<li data-value="Media Response" data-property="messageType"><a href="#">Media Response</a></li>
		<li data-value="Media Share" data-property="messageType"><a href="#">Media Share</a></li>
		<li data-value="Send Email" data-property="messageType"><a href="#">Send Email</a></li>
	</ul>
	<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text" />
</div>


<div class="btn-group selectlist hidden" data-resize="auto" data-initialize="selectlist" id="MySelectlist9">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
		<span class="selected-label">All</span>
		<span class="caret"></span>
		<span class="sr-only">Toggle Filters</span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li data-value="all" data-property="all" data-selected="true"><a href="#">All</a></li>
		<li class="divider"></li>
		<li data-value="Outbound" data-property="messageType"><a href="#">Outbound</a></li>
		<li data-value="Text Response" data-property="messageType"><a href="#">Text Response</a></li>
		<li data-value="Vote Survey" data-property="messageType"><a href="#">Vote Survey</a></li>
		<li data-value="Mobile Opt-In" data-property="messageType"><a href="#">Mobile Opt-In</a></li>
		<li data-value="Info Capture" data-property="messageType"><a href="#">Info Capture</a></li>
		<li data-value="Outbound Media" data-property="messageType"><a href="#">Outbound Media</a></li>
		<li data-value="Media Response" data-property="messageType"><a href="#">Media Response</a></li>
		<li data-value="Media Share" data-property="messageType"><a href="#">Media Share</a></li>
		<li data-value="Send Email" data-property="messageType"><a href="#">Send Email</a></li>
	</ul>
	<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text" />
</div>

<button type="button" class="btn btn-default" id="btnShowSelect4">show</button>
</body>
</html>
